<template>
  <div class="contain">
    <myform>
      <myformitem labelWidth="20px">
        <myalert type="success"
          >请注册两年以上的老用户去个人页面领取老用户礼包
          <mylink type="warning" :underline="false" href="http://www.baidu.com">
            <template #default>去百度</template>
          </mylink>
        </myalert></myformitem
      >
      <myformitem label="用户名:" labelWidth="50px">
        <myinput
          :value="username"
          @input="username = $event"
          type="text"
          placeholder="请输入账号"
        ></myinput>
      </myformitem>
      <myformitem label="密码:" labelWidth="50px">
        <myinput
          :value="password"
          @input="password = $event"
          type="password"
          placeholder="请输入密码"
        ></myinput>
      </myformitem>
      <myformitem label="手机号:" labelWidth="50px">
        <myinput
          :value="email"
          @input="email = $event"
          type="text"
          placeholder="请输入邮箱地址"
        ></myinput>
      </myformitem>
      <myformitem labelWidth="400px">
        <template>
          <mybutton @click="dialogVisible = true" type="primary">
            提交
          </mybutton>
          <mybutton type="warning" disabled>
            注册
          </mybutton>
        </template>
      </myformitem>
      <myformitem labelWidth="400px">
        <template>
          <mybutton
            @click="addMessage('你好，您的余额已不足，请充值', 2000)"
            type="primary"
          >
            提示信息
          </mybutton>
          <myswitch v-model="value"></myswitch>
        </template>
      </myformitem>
    </myform>
    <!-- <mydialog
      :visible="dialogVisible"
      @update:visible="dialogVisible = $event"
    ></mydialog> -->
    <mydialog
      :visible.sync="dialogVisible"
      width="50%"
      top="100px"
      :isShow="isShowCloseBtn"
    >
      <template #header>
        <myalert type="warning" :closeble="false">请输入您的验证信息</myalert>
      </template>
      <template #default>
        <myform>
          <myformitem label="用户名:" labelWidth="100px">
            <myinput
              :value="dialogusername"
              @input="dialogusername = $event"
              type="text"
              placeholder="请输入账号"
            ></myinput>
          </myformitem>
          <myformitem label="密码:" labelWidth="100px">
            <myinput
              :value="dialogpassword"
              @input="dialogpassword = $event"
              type="password"
              placeholder="请输入密码"
            ></myinput>
          </myformitem>
        </myform>
      </template>
      <template #footer>
        <mybutton @click="dialogVisible = false" type="success">确定</mybutton>
      </template>
    </mydialog>
  </div>
</template>

<script>
// import myalert from './components/Myalert'
// import mylink from './components/MyLink'
// import myinput from './components/Myinput'

export default {
  // components: {
  //   myalert,
  //   mylink,
  //   myinput
  // },
  data () {
    return {
      username: '哈哈哈',
      password: '',
      email: '',
      dialogVisible: false,
      isShowCloseBtn: true,
      isshow: false,
      dialogusername: '小明',
      dialogpassword: '',
      value: false
    }
  },
  methods: {
    focusHandle () {
      console.log('获得了焦点')
    },
    blurHandle () {
      console.log('失去了焦点')
    },
    addMessage (title, duration) {
      this.$message(title, duration)
    }
  }
}
</script>

<style></style>
